<template>
	<view class="container">
		<image :src="icon" mode="" style="width: 80px; height: 80px;" class="image"></image>
		<view class="name">刘永宏</view>
		<view style="width: 100%;">
			<view class="entries">
				<view class="entry">
					<text>
						<img :src="tup" alt="" style="width: 30px; height: 30px; margin-top: 10px;" />
						<text class="wenzi">个人信息</text>
					</text>
					<image src="../../static/more.png" style="width: 30px; height: 30px; margin-top: 10px;" ></image>
				</view>
				<view class="entry">
					<text>
						<img :src="tup1" alt="" style="width: 30px; height: 30px;margin-top: 10px;" />
						<text class="wenzi">订单列表</text>
						</text>
						<image src="../../static/more.png" style="width: 30px; height: 30px; margin-top: 10px;"></image>
				</view>
				<view class="entry">
					<text>
						<img :src="tup2" alt="" style="width: 30px; height: 30px; margin-top: 10px;" />
						<text class="wenzi">修改密码</text>
						</text>
						<image src="../../static/more.png" style="width: 30px; height: 30px; margin-top: 10px;"></image>
				</view>
				<view class="entry">
					<text>
						<img :src="tup3" alt="" style="width: 30px; height: 30px; margin-top: 10px;" />
						<text class="wenzi">意见反馈</text>
						</text>
						<image src="../../static/more.png" style="width: 30px; height: 30px; margin-top: 10px;"></image>
				</view>
			</view>
			<button type="default" class="btn">退出</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tup:'/static/UserInfo.png',
				tup1:'/static/purchaseorder.png',
				tup2:'/static/modify-password.png',
				tup3:'/static/yijianfankui.png',
				icon: '/static/head_icon.png'
			}
		}
	}
</script>

<style>
	.name{
		color: #ccc;
		margin-left: -180px;
		display: flex;
		margin-top: -70px;
	}
	.wenzi{
		display: flex;
		margin-top: -30px;
		margin-left: 45px;
		
	}
	page{
		width: 100%;
	}
	.container{
		margin-top: 20px;
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 100%;
		
	}
	.entries{
		display: flex;
		margin-top: 30px;
		flex-direction: column;
		align-items: center;
	}
	.entry{
		display: flex;
		flex-direction: row;
		height:  50px;
		width: 90%;
		margin-top: 5px;
		border-bottom: 1px solid #ccc;
		justify-content: space-between;
	}
	.entry>text{
		
		display: block;
		width: 200px;
		height: 40px;
	

	}
	image{
		display: flex;
		margin-left: -200px;
		margin-bottom: 20px;
		border-radius: 60%;
	}
	.name{
		margin-left: 2px;
		margin-bottom: 10%;
	}
	.btn{
		width: 75%;
		border: 1px solid white;
		background-color: #007AFF;
		margin-top: 20px;
	}
	.tup{
		background: url("../../static/purchaseorder.png") no-repeat;
	}
</style>
